<template>
  <div class="app-container" style="background-color: #f0f2f5">
    <div
      class="data-pad u-f-ajc"
      style="width: auto; margin: 0 50px; margin-top: 30px; margin-bottom: 40px"
    >
      <div class="data-box" style="margin-right: 30; margin-left: 0">
        <div style="float: left">
          <img
            src="../../../assets/img/order-pic.png"
            mode="widthFix"
            lazy-load="false"
            style="width: 52px; height: 52px"
          >
        </div>
        <div class="u-f-ac u-f-column" style="float: right">
          <div class="data-box-text">今日订单数量</div>
          <div class="data-box-num">
            {{ dayOrderCount }}
          </div>
        </div>
      </div>
      <div class="data-box">
        <div style="float: left">
          <img
            src="../../../assets/img/sales-pic.png"
            mode="widthFix"
            lazy-load="false"
            style="width: 52px; height: 52px"
          >
        </div>
        <div class="u-f-ac u-f-column" style="float: right">
          <div class="data-box-text">今日交易金额</div>
          <div class="data-box-num">
            {{ daySales }}
          </div>
        </div>
      </div>
      <div class="data-box">
        <div style="float: left">
          <img
            src="../../../assets/img/order-pic.png"
            mode="widthFix"
            lazy-load="false"
            style="width: 52px; height: 52px"
          >
        </div>
        <div class="u-f-ac u-f-column" style="float: right">
          <div class="data-box-text">总订单数量</div>
          <div class="data-box-num">
            {{ allOrderCount }}
          </div>
        </div>
      </div>
      <div class="data-box" style="margin-left: 30px; margin-right: 0">
        <div style="float: left">
          <img
            src="../../../assets/img/sales-pic.png"
            mode="widthFix"
            lazy-load="false"
            style="width: 52px; height: 52px"
          >
        </div>
        <div class="u-f-ac u-f-column" style="float: right">
          <div class="data-box-text">总交易金额</div>
          <div class="data-box-num">
            {{ allSales }}
          </div>
        </div>
      </div>
    </div>

    <div id="Chart1" class="order-chart" />
  </div>
</template>

<script>
import {
  getAllOrderCount,
  getDayOrderCount,
  getMonOrderCount,
  getLastMonOrder,
  getLastTwoMonOrder
} from '../../../api/report/orderCount.js'
import {
  getAllSales,
  getDaySales,
  getMonSales,
  getLastMonSales,
  getLastTwoMonSales
} from '../../../api/report/salesCount.js'
import qs from 'qs'
var xAxisData = ['7月', '8月', '9月']
var data1 = []
var data2 = []

export default {
  name: 'Hello',
  data() {
    return {
      allOrderCount: 0,
      dayOrderCount: 0,
      allSales: undefined,
      daySales: undefined
    }
  },
  mounted() {
    this.drawLine()
  },
  created() {
    this.getAllOrderCount()
    this.getDayOrderCount()
    this.getAllSales()
    this.getDaySales()
    this.getMonOrderList()
    this.getMonSalesList()
  },
  methods: {
    getAllOrderCount() {
      getAllOrderCount(qs.stringify()).then((res) => {
        this.allOrderCount = res.allOrderCount
      })
    },
    getDayOrderCount() {
      getDayOrderCount(qs.stringify()).then((res) => {
        this.dayOrderCount = res.dayOrderCount
      })
    },
    getAllSales() {
      getAllSales(qs.stringify()).then((res) => {
        this.allSales = res.allSales
      })
    },
    getDaySales() {
      getDaySales(qs.stringify()).then((res) => {
        this.daySales = res.daySales
      })
    },
    getMonOrderList() {
      getMonOrderCount(qs.stringify()).then((res) => {
        data1[2] = res.monOrderCount
      })
      getLastMonOrder(qs.stringify()).then((res) => {
        data1[1] = res.lastMonOrder
      })
      getLastTwoMonOrder(qs.stringify()).then((res) => {
        data1[0] = res.lastTwoMonOrder
      })
    },
    getMonSalesList() {
      getLastTwoMonSales(qs.stringify()).then((res) => {
        data2[0] = res.lastTwoMonSales
      })
      getLastMonSales(qs.stringify()).then((res) => {
        data2[1] = res.lastMonSales
      })
      getMonSales(qs.stringify()).then((res) => {
        data2[2] = res.monSales
      })
    },
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(document.getElementById('Chart1'))
      // 绘制图表
      const option = {
        title: {
          text: '近三月 订单/交易额统计'
        },
        legend: {
          data: ['订单', '交易额']
        },
        toolbox: {
          // y: 'bottom',
          feature: {
            magicType: {
              type: ['stack', 'tiled']
            },
            dataView: {},
            saveAsImage: {
              pixelRatio: 2
            }
          }
        },
        tooltip: {},
        xAxis: {
          data: xAxisData,
          splitLine: {
            show: false
          }
        },
        yAxis: {},
        series: [
          {
            name: '订单',
            type: 'bar',
            data: data1,
            animationDelay: function(idx) {
              return idx * 10
            }
          },
          {
            name: '交易额',
            type: 'bar',
            data: data2,
            animationDelay: function(idx) {
              return idx * 10 + 100
            }
          }
        ],
        animationEasing: 'elasticOut',
        animationDelayUpdate: function(idx) {
          return idx * 5
        }
      }
      myChart.setOption(option)
    }
  }
}
</script>

<style>
.u-f,
.u-f-ac,
.u-f-ajc {
  display: flex;
}
.u-f-ac {
  align-items: center;
}
.u-f-ajc {
  justify-content: center;
}
.u-f-jsp {
  justify-content: space-between;
}
.u-f-column {
  flex-direction: column;
}
.u-f-row {
  flex-direction: row;
}

.order-chart {
  width: auto;
  height: 470px;
  margin: 0 50px;
  padding: 50px;
  background-color: white;
}

.data-box {
  margin: 0 30px;
  width: 400px;
  height: 100px;
  padding: 20px;
  background-color: white;
  box-shadow: 3upx 3upx 5upx black;
}

.data-box-text {
  color: #00000073;
  font-size: 16px;
  font-weight: bold;
  margin-right: 5px;
}

.data-box-num {
  color: #0a98d5;
  font-size: 20px;
  font-weight: bold;
  margin-top: 12px;
}
</style>
